<template>
    <Dialog :app-dialog="appDialog">
        <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px" class="formData">
            <!-- <el-form-item label="上传表格" required> -->
            <div class="upload">
                <div class="left">
                    1.请根据导入门店模板，进行填写， <span class="download" @click="downloadDome">下载Excel模版</span>
                </div>
            </div>
            <!-- </el-form-item> -->
            <el-form-item label="2.上传导入门店模板," required label-width="160px">
                <div class="upload-content">
                    <ZWUpload
                        v-if="!formData.fileData.name"
                        class="upload"
                        :up-info="picInfo"
                        @submit="getFileListFun" />
                    <div v-if="!formData.fileData.name" class="upload-box">
                        <el-icon style="font-size: 20px"><plus /></el-icon>
                        <span>点击上传</span>
                    </div>
                    <div v-if="formData.fileData.name" class="upload-file-box">
                        <div class="left">
                            <img src="@/assets/image/customer/xls_icon.png" alt="" />
                            <span>{{ formData.fileData.name }}</span>
                        </div>
                        <img class="right" src="@/assets/image/customer/close_icon.png" alt="" @click="delFile" />
                    </div>
                </div>
            </el-form-item>
        </el-form>
    </Dialog>
    <!-- 导入记录 -->
    <ImportTable ref="ImportTableRef" :selectid="selectid" @cancel="closeImportCustomer" @save="getListFun" />
</template>

<script lang="ts" setup>
import Dialog from '@/components/Dialog.vue';
import ZWUpload from '@/components/ZWUpload.vue';
import ImportTable from './ImportTable.vue';
import { inputCustomer } from '@/api/customerCenter';
import { getdownloadtemp, getdownimport } from '@/api/employe/storemanagement/sensitiveWord';

import { ElMessage } from 'element-plus';
import { ref, reactive, watch, computed } from 'vue';
import type { ElForm } from 'element-plus';
import { getSetionId } from '@/utils/utils';
import { useStore } from '@/store';

const emit = defineEmits(['save', 'cancel']);
const pro = defineProps(['selectid']);
const selectid = ref(pro.selectid);
type FormInstance = InstanceType<typeof ElForm>;
const ruleFormRef = ref<FormInstance>();
const store = useStore();
const ImportTableRef = ref(null);
const tabs = ref([]);
const picInfo = ref({
    type: 5,
    label: '文件',
    prop: 'files',
    multiple: false,
    limitSize: 20,
    limitNum: 1,
    acceptFile: '.xls,.xlsx',
    files: []
});
const rules = [
    { cust_tag_ids: { required: true, trigger: 'blur', message: '请选择标签' } },
    { work_user_ids: { required: true, trigger: 'blur', message: '请选择分配员工' } }
];
const formData = ref({});
const yuangongList = ref([]);

// 初始化formData
const initFormData = () => {
    ruleFormRef.value?.resetFields();
    formData.value = {
        fileData: {},
        cust_tag_ids: [], //标签id
        work_user_ids: [] //当前选择的员工id
    };
};

// 获取选择的标签
const getLabelFun = (val: object) => {
    formData.value.cust_tag_ids = val.idList;
    tabs.value = val.data;
};
// 删除选中的标签
const delTab = (index: number) => {
    tabs.value.splice(index, 1);
};

// 关闭弹框
const cancelHandel = () => {
    appDialog.value.visible = false;
    emit('cancel');
};

// 保存
const submitHandel = () => {
    const { fileData, cust_tag_ids, work_user_ids } = formData.value;
    if (!fileData.name) {
        ElMessage.error('请上传门店模板');
        return;
    }
    setTimeout(() => {
        ImportTableRef.value.appDialog.visible = true;
        appDialog.value.visible = false;
    }, 0);
    const param = new FormData();
    param.append('file', fileData.raw);
    // param.append('cust_tag_ids', cust_tag_ids)
    // param.append('work_user_ids', work_user_ids)
    getdownimport(param)
        .then((r: any) => {
            emit('save');
            ImportTableRef.value.initpage();
            cancelHandel();
        })
        .catch((e: object) => {});
};

// 获取上传的文件
const getFileListFun = (val: any) => {
    formData.value.fileData = val;
};

const appDialog = ref({
    visible: false,
    title: '导入门店',
    width: '620px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '导入'
});

watch(
    () => appDialog.value.visible,
    val => {
        if (val) {
            initFormData();
            yuangongList.value = [];
            tabs.value = [];
        }
    }
);

// 下载dome
const downloadDome = () => {
    getdownloadtemp({})
        .then((r: any) => {
            const a = document.createElement('a');
            // 获取文件名fileName
            a.href = r.url;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        })
        .catch((e: any) => {});
};

// 删除当前上传的文件
const delFile = () => {
    formData.value.fileData = {};
    picInfo.value.files = [];
};

defineExpose({
    appDialog
});
</script>

<style lang="scss" scoped>
.formData {
    max-height: 50vh;
    overflow-y: scroll;
    padding: 12px 30px 50px 0;

    .upload {
        .left {
            display: flex;
            margin-left: 10px;

            margin-bottom: 20px;
        }
    }
    .upload-content {
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 180px;
        height: 36px;
        border: 1px solid #eaeaea;
        margin-bottom: 6px;
        .upload {
            box-sizing: border-box;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9;
            opacity: 0;
        }
        .upload-box {
            position: relative;
            width: 180px;
            height: 36px;
            border-radius: 4px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            color: #969696;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                margin-left: 9px;
            }
        }
        .upload-file-box {
            display: flex;
            justify-content: space-between;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            width: 180px;
            height: 36px;
            line-height: 36px;
            .left {
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                color: #33302d;
                padding-left: 10px;
                display: flex;
                span {
                    vertical-align: middle;
                    width: 120px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                img {
                    margin-top: 8px;
                    width: 20px;
                    height: 20px;
                    margin-right: 4px;
                    vertical-align: middle;
                }
            }
            .right {
                cursor: pointer;
                width: 12px;
                height: 12px;
                margin-right: 10px;
                margin-top: 12px;
            }
        }
    }

    .download {
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #ff6b00;
        margin-left: 10px;
        cursor: pointer;
    }
    .upload-desc {
        margin-top: 6px;
        background: #f9f9f9;
        border-radius: 1px;
        font-size: 12px;
        font-family: STHeitiSC-Light, STHeitiSC;
        color: #696969;
        padding: 4px 8px;
        line-height: 16px;
    }
    .tabs-box {
        margin-bottom: 7px;
        div {
            display: inline-block;
            background: #fffaf9;
            border-radius: 2px;
            border: 1px solid #ffc69e;
            justify-content: center;
            align-items: center;
            padding: 0 4px;
            line-height: 22px;
            height: 22px;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #ff6b00;
            margin-right: 10px;
            margin-bottom: 7px;
            .del-icon {
                margin-left: 8px;
                vertical-align: middle;
                cursor: pointer;
            }
        }
    }
    .yuangong-list {
        div {
            display: inline-block;
            vertical-align: middle;
            background: #fffaf9;
            border-radius: 1px;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 4px 8px;
            line-height: 22px;
            box-sizing: border-box;
            img {
                width: 10px;
                height: 12px;
            }
            .del_icon {
                width: 12px;
                height: 12px;
                cursor: pointer;
            }
            span {
                margin: 0 10px;
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                color: #35383a;
            }
        }
    }
}
.formData::-webkit-scrollbar {
    display: none;
}
</style>

<style>
.upload-content .el-upload {
    display: block !important;
}

.upload-content .el-form-item__content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
</style>
